<template>
  <!--
    自定义环境变量：
       开发环境
          根目录创建一个.env.development
          定义环境变量：规则限制：一定要以VUE_APP_开头  如:VUE_APP_TITLE='开发环境标题'
          访问环境变量：process.env.VUE_APP_TITLE
       生产环境
          根目录创建一个.env.production
          定义环境变量：规则限制：一定要以VUE_APP_开头  如:VUE_APP_TITLE='生产环境标题'
          访问环境变量：process.env.VUE_APP_TITLE
       应用：定义接口基地址
   -->
  <div>
    <h2>{{ title2 }}</h2>
    <hr>
    <h3>{{ title }}</h3>
    <button @click="btnClick">调用接口</button>
  </div>
</template>
<script>
import { sysLogin } from '@/api/test'
export default {
  data() {
    return {
      // 开发环境：开发环境标题
      // 生产环境：生产环境标题
      title:
        process.env.NODE_ENV === 'development'
          ? '开发环境标题'
          : '生产环境标题',
      title2: process.env.VUE_APP_TITLE
    }
  },
  methods: {
    async btnClick() {
      const res = await sysLogin()
      console.log(res)
    }
  }
}
</script>
<style></style>
